<template>
  <view class="unify-media-warp">
    <view class="uni-header">
      <uni-stat-breadcrumb v-if="mode !== 'picker'" class="uni-stat-breadcrumb-on-phone" />
      <view :class="{tabTop: mode === 'picker'}">
        <view class="tabs">
          <view class="tabs-nav">
            <view class="tab-label" v-for="tab in tabs" :key="tab.key" :class="{active: tab.key === currentTab}"
              @click="switchTab(tab.key)">{{ tab.label }}</view>
          </view>
          <view class="external-options" v-if="mode === 'picker'">
            <button type="primary" size="mini" @click="insertMedia">插入</button>
          </view>
        </view>
      </view>
    </view>
  

    <MediaPanel :style="{height: mediaPanelHeight}" ref="mediaPanel" :media-type="currentTab" :selected-count="selectedCount" />
  </view>
</template>

<script>
  import MediaPanel from "./components/media-panel"

  import {
    mapActions
  } from 'vuex'
  export default {
    name: "unify-source",
    emits: ['onInsert'],
    props: {
      // manager: 管理模式，picker: 选择模式
      mode: {
        type: String,
        default: () => "manager"
      },
      // 选择的媒体类型
      mediaType: {
        type: String,
        default: "all"
      },
      // 选择的媒体数量
      selectedCount: {
        type: Number,
        default: () => 0
      }
    },
    components: {
      MediaPanel
    },
    data() {
      return {
        currentTab: null,
        tabs: [],
      }
    },
    computed:{
      mediaPanelHeight(){
        let height = "calc(100vh - var(--status-bar-height) - 44px - 50px";
        
        height += ")";
        return height;
      }
    },
    created() {

      this.tabs = [{
        key: "all",
        label: "全部"
      }];
      this.form().then(data => {
        Object.keys(data.typeList).forEach(key => {
          this.tabs.push({
            key: key,
            label: data.typeList[key]
          })

          this.currentTab = this.tabs[0].key
        })
      });


    },
    methods: {
      ...mapActions('source', ['form']),
      switchTab(tabKey) {
        this.currentTab = tabKey
      },
      insertMedia() {

        const mediaPanel = this.$refs.mediaPanel
        if (!mediaPanel) return


        const selectedMediaItems = mediaPanel.getSelectedMediaItems()
        if (selectedMediaItems.length <= 0) return

        const mediaList = selectedMediaItems.reduce((list, item) => {
          list.push({
            url: item.url,
            thumbUrl: item.thumbUrl,
            type: item.type,
            size: item.size,
            ext: item.ext
          })
          return list
        }, [])

        this.$emit('onInsert', mediaList)
      }
    }
  }
</script>

<style lang="scss">
  .unify-media-warp {
    height: 100%;
    display: flex;
    flex-direction: column;
    // width: 50%;
  }
  .tabTop{
    padding-top: calc(var(--status-bar-height) + 60px);
  }
  
  .tabs {
    // border-bottom: #f1f1f1 solid 1px;
    display: flex;
    align-items: center;

    .tabs-nav {
      display: flex;
      align-items: center;
      height: 50px;
      background-color: #fff;
      flex: 1;

      .tab-label {
        font-size: 14px;
        color: #333;
        padding: 0 20px;
        cursor: pointer;
        user-select: none;

        transition: 0.2s;

        &.active {
          color: #007aff;
          font-weight: bolder;
        }
      }
    }

    .external-options {
      margin-right: 20rpx;
      display: flex;
      align-items: center;
    }
  }
</style>